<template>
  <div class="orderquery">
    <div class="top">
      <el-form ref="form" :model="selectData">
        <div style="display: flex">
          <el-form-item
            label="订单号"
            size="mini"
            style="margin: 0 20px 0 0; display: flex"
          >
            <el-input
              onkeyup="value=value.replace(/[^\x00-\xff]/g, '')"
              v-model="selectData.orderNumber"
              style="width: 100px"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="酒店名称"
            size="mini"
            style="margin: 0 20px 0 0; display: flex"
          >
            <el-input
              v-model="selectData.hotelName"
              style="width: 200px"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="渠道订单号"
            size="mini"
            style="margin: 0 20px 0 0; display: flex"
          >
            <el-input
              onkeyup="value=value.replace(/[^\x00-\xff]/g, '')"
              v-model="selectData.orderId"
              style="width: 100px"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="入住人姓名"
            size="mini"
            style="margin: 0 20px 0 0; display: flex"
          >
            <el-input
              v-model="selectData.contactsName"
              style="width: 100px"
            ></el-input>
          </el-form-item>
         
        </div>
        <div style="display: flex; margin: 10px 0 0 0">
           <el-form-item
            label="联系人手机"
            size="mini"
            style="margin: 0 20px 0 0; display: flex"
          >
            <el-input
              v-model="selectData.phone"
              style="width: 100px"
              maxlength="11"
              oninput="value=value.replace(/[^\d]/g,'')"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="用户手机号"
            size="mini"
            style="margin: 0 20px 0 0; display: flex"
          >
            <el-input
              v-model="selectData.userAccount"
              style="width: 100px"
              maxlength="11"
              oninput="value=value.replace(/[^\d]/g,'')"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="订单状态"
            size="mini"
            style="margin: 0 20px 0 0; display: flex"
          >
            <el-select
              style="width: 180px"
              v-model="selectData.orderStatus"
              placeholder="订单状态"
              clearable
            >
              <el-option
                v-for="item in orderStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="支付状态"
            size="mini"
            style="margin: 0 20px 0 0; display: flex"
          >
            <el-select
              v-model="selectData.payStatus"
              placeholder="支付状态"
              clearable
            >
              <el-option
                v-for="item in payStatusList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div style="display: flex; margin: 10px 0 0 0">
          <!-- <el-form-item label="支付方式" size="mini" style="margin: 0 20px 0 0; display: flex">
            <el-select v-model="ginseng.payWay" placeholder="请选择支付方式" clearable>
              <el-option style="width: 100px" v-for="item in payment" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item
            label="预定时间"
            size="mini"
            style="margin: 0 15px 0 0; display: flex"
          >
            <el-date-picker
              size="mini"
              style="width: 140px; margin: 0 10px 0 10px"
              v-model="selectData.createTimeMax"
              type="date"
              placeholder="选择预定日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <span style="color: #525558; font-size: 15px; margin: 0 10px 0 10px"
              >至</span
            >
            <el-date-picker
              size="mini"
              style="width: 140px; margin: 0 10px 0 10px"
              v-model="selectData.createTimeMin"
              type="date"
              placeholder="选择预定日期"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="入住时间"
            size="mini"
            style="margin: 0 15px 0 0; display: flex"
          >
            <el-date-picker
              style="width: 140px; margin: 0 10px 0 10px"
              size="mini"
              value-format="yyyy-MM-dd"
              v-model="selectData.checkInTimeMax"
              placeholder="选择入住时间"
            >
            </el-date-picker>
            <span style="color: #525558; font-size: 15px; margin: 0 10px 0 10px"
              >至</span
            >
            <el-date-picker
              style="width: 140px; margin: 0 10px 0 10px"
              size="mini"
              value-format="yyyy-MM-dd"
              v-model="selectData.checkInTimeMin"
              placeholder="选择入住时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label="离店时间"
            size="mini"
            style="margin: 0 15px 0 0; display: flex"
          >
            <el-date-picker
              style="width: 140px; margin: 0 10px 0 10px"
              size="mini"
              v-model="selectData.leaveTimeMax"
              placeholder="选择离店时间"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <span style="color: #525558; font-size: 15px; margin: 0 10px 0 10px"
              >至</span
            >
            <el-date-picker
              style="width: 140px"
              size="mini"
              v-model="selectData.leaveTimeMin"
              placeholder="选择离店时间"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </div>
        <el-button
          style="background-color: #f6b23e; color: #fff; margin: 20px 0 0 0"
          @click="conditionHotelOrder"
          >搜索
        </el-button>
      </el-form>
    </div>
    <!-- 表格 -->
    <div style="bottom">
      <el-table
        :data="details"
        border
        size="mini"
        :header-cell-style="{
          color: '#fff',
          background: '#6090EC',
          fontSize: '11px',
          fontWeight: 'normal',
        }"
      >
        <el-table-column
          prop="orderNumber"
          label="订单号"
          width="100"
        ></el-table-column>
        <el-table-column
          prop="channelNumber"
          label="渠道订单号"
          width="110"
        ></el-table-column>
        <el-table-column
          prop="hotelName"
          label="酒店名称"
          width="150"
        ></el-table-column>
        <el-table-column prop="contactsName" label="联系人" width="100">
        </el-table-column>
        <el-table-column prop="phone" label="联系人手机" width="110">
        </el-table-column>
        <el-table-column prop="adminName" label="预定员" width="100">
        </el-table-column>
        <el-table-column prop="orderStatus" label="订单状态" width="110">
          <template slot-scope="scope">
            <template v-if="scope.row.orderStatus == 'unpaid'">未支付</template>
            <template v-if="scope.row.orderStatus == 'haspay'">已支付</template>
            <template v-if="scope.row.orderStatus == 'payFail'"
              >支付失败</template
            >
            <template v-if="scope.row.orderStatus == 'cancelpay'"
              >取消支付</template
            >
            <template v-if="scope.row.orderStatus == 'refund'">退款</template>
            <template v-if="scope.row.orderStatus == 'refundFail'"
              >退款失败</template
            >
            <template v-if="scope.row.orderStatus == 'subscribe'"
              >预约中</template
            >
            <template v-if="scope.row.orderStatus == 'defeated'"
              >预约失败</template
            >
            <template v-if="scope.row.orderStatus == 'checkIn'"
              >待入住</template
            >
            <template v-if="scope.row.orderStatus == 'cancelStay'"
              >取消中</template
            >
            <template v-if="scope.row.orderStatus == 'cancelOrder'"
              >取消成功</template
            >
            <template v-if="scope.row.orderStatus == 'accomplish'"
              >完成</template
            >
          </template>
        </el-table-column>

        <el-table-column prop="payType" label="支付类型" width="100">
          <template slot-scope="scope">
            <template v-if="scope.row.payType == 'creditcard'">信用卡</template>
            <template v-if="scope.row.payType == 'debitcard'">储蓄卡</template>
            <template v-if="scope.row.payType == 'unionPayQrCode'">银联二维码</template>
          </template>
        </el-table-column>

        <el-table-column prop="payStatus" label="支付状态" width="110">
          <template slot-scope="scope">
            <template v-if="scope.row.payStatus == 'unpaid'">未支付</template>
            <template v-if="scope.row.payStatus == 'haspay'">已支付</template>
            <template v-if="scope.row.payStatus == 'payFail'"
              >支付失败</template
            >
            <template v-if="scope.row.payStatus == 'cancelpay'"
              >取消支付</template
            >
            <template v-if="scope.row.payStatus == 'refund'">已退款</template>
            <template v-if="scope.row.payStatus == 'refundFail'"
              >退款失败</template
            >
          </template>
        </el-table-column>
        <el-table-column prop="checkInTime" label="入住时间" width="110">
        </el-table-column>
        <el-table-column prop="leaveTime" label="离店时间" width="110">
        </el-table-column>
        <el-table-column prop="createTime" label="预定时间" width="140">
        </el-table-column>
        <el-table-column prop="roomNumber" label="房间数量" width="140">
        </el-table-column>
        <el-table-column prop="dayNumber" label="入住天数" width="60">
        </el-table-column>
        <el-table-column prop="totalPrice" label="总价格" width="60">
        </el-table-column>
        <el-table-column prop="payPrice" label="实际支付金额" width="60">
        </el-table-column>

        <el-table-column prop="name" label="操作" width="280" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="listdetails(scope.row)"
              >详情</el-button
            >
            <el-button
              size="mini"
              v-if="scope.row.payStatus == 'haspay'"
              @click="cencelBtn(scope.row)"
              type="primary"
              >取消订单</el-button
            >
            <el-button
              v-if="scope.row.payStatus == 'unpaid'"
              size="mini"
              type="primary"
              @click="topay(scope.row)"
              >去支付</el-button
            >
            <!-- <el-button size="mini" type="warning" @click="cancel(scope.row)">
              取消</el-button> -->
            <!-- <el-button size="mini" v-if="scope.row.plusMoneyStatus == 'payd' &&scope.row.orderStatusName != '确认'"
              type="primary" @click="editHotelOrderMethod(scope.row)">
              确认状态</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="详情"
      :visible.sync="detailPopup"
      :close-on-click-modal="false"
      width="60%"
    >
      <el-descriptions
        class="margin-top"
        :column="3"
        border
        v-if="JSON.stringify(meituanInfo) != '{}'"
      >
        <el-descriptions-item v-if="JSON.stringify(localInfo) != '{}'">
          <template slot="label"> 订单id </template>
          {{ localInfo.orderId }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 订单号 </template>
          {{ localInfo.orderNumber }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 订单状态 </template>
          {{
            meituanInfo.result.orderInfos[0].baseInfo.orderStatus == "create"
              ? "创建订单"
              : meituanInfo.result.orderInfos[0].baseInfo.orderStatus ==
                "booking"
              ? "预定中"
              : meituanInfo.result.orderInfos[0].baseInfo.orderStatus ==
                "book_suc"
              ? "预定成功"
              : meituanInfo.result.orderInfos[0].baseInfo.orderStatus ==
                "book_fail"
              ? "预定失败"
              : meituanInfo.result.orderInfos[0].baseInfo.orderStatus ==
                "canceling"
              ? "取消中 "
              : meituanInfo.result.orderInfos[0].baseInfo.orderStatus ==
                "cancel_suc"
              ? "取消成功"
              : meituanInfo.result.orderInfos[0].baseInfo.orderStatus ==
                "cancel_fail"
              ? "取消失败 "
              : meituanInfo.result.orderInfos[0].baseInfo.orderStatus == "abort"
              ? "已消费退款"
              : meituanInfo.result.orderInfos[0].baseInfo.orderStatus ==
                "book_checkin"
              ? "已入住"
              : ""
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 总金额 </template>
          {{ meituanInfo.result.orderInfos[0].baseInfo.totalPrice / 100 }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 支付金额 </template>
          {{ meituanInfo.result.orderInfos[0].baseInfo.settlePrice / 100 }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 预约下单时间 </template>
          {{ meituanInfo.result.orderInfos[0].baseInfo.createTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 酒店名称 </template>
          {{ meituanInfo.result.orderInfos[0].aptInfo.poiName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 房间名称 </template>
          {{ meituanInfo.result.orderInfos[0].aptInfo.roomName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 房间数量 </template>
          {{ meituanInfo.result.orderInfos[0].aptInfo.roomCount }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 入住时间 </template>
          {{ meituanInfo.result.orderInfos[0].aptInfo.checkinTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 到店时间 </template>
          {{ meituanInfo.result.orderInfos[0].aptInfo.arriveTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 离店时间 </template>
          {{ meituanInfo.result.orderInfos[0].aptInfo.checkoutTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 入住人 </template>
          {{ meituanInfo.result.orderInfos[0].aptInfo.personNames }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 联系人 </template>
          {{ meituanInfo.result.orderInfos[0].aptInfo.contactName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 联系人电话 </template>
          {{ meituanInfo.result.orderInfos[0].aptInfo.contactPhone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 分销商佣金 </template>
          {{ meituanInfo.result.orderInfos[0].roomNights.subPrice / 100 }}
        </el-descriptions-item>
      </el-descriptions>
      <!-- <div style="margin: 10px 0 10px 20px; display: flex">
        <div style="width: 40%">
          <span class="bold">预付信息:</span>
          <span>{{ window.prepaidInformation }}</span>
        </div>
        
      </div>
      <div style="margin: 10px 0 10px 20px; display: flex">
        <div style="width: 40%">
          <span class="bold">渠道订单号:</span>
          <span>{{ window.eLongOrderId }}</span>
        </div>
        <div style="margin: 0 0 0 40px">
          <span class="bold">酒店名名称:</span>
          <span>{{ window.hotelName }}</span>
        </div>
      </div>
      <div style="margin: 10px 0 10px 20px; display: flex">
        <div style="width: 40%">
          <span class="bold">酒店联系人信息:</span>
          <span>{{ window.hotelContact }}</span>
        </div>
        <div style="margin: 0 0 0 40px">
          <span class="bold">确认方式:</span>
          <span>{{ window.hotelConfirmType }}</span>
        </div>
      </div>
      <div style="margin: 10px 0 10px 20px; display: flex">
        <div style="width: 40%">
          <span class="bold">是否保价:</span>
          <span>{{ window.eLongOrderId }}</span>
        </div>
        <div style="margin: 0 0 0 40px">
          <span class="bold">制单人:</span>
          <span>{{ window.ppEmployeeName }}</span>
        </div>
      </div>
      <div style="margin: 10px 0 10px 20px; display: flex">
        <div style="width: 40%">
          <span class="bold">订单来源:</span>
          <span>{{ window.orderSourceTypeName }}</span>
        </div>
        <div style="margin: 0 0 0 40px">
          <span class="bold">预定类型:</span>
          <span>{{ window.orderOccuptType }}</span>
        </div>
      </div>
      <div style="margin: 10px 0 10px 20px; display: flex">
        <div style="width: 40%">
          <span class="bold">付款方式:</span>
          <span>{{ window.paymentMethod }}</span>
        </div>
        <div style="margin: 0 0 0 40px">
          <span class="bold">保价截至时间:</span>
          <span>{{ window.insuredTime }}</span>
        </div>
      </div>
      <div style="margin: 10px 0 10px 20px; display: flex">
        <div style="width: 40%">
          <span class="bold">客房类型:</span>
          <span>{{ window.roomTypeName }}</span>
        </div>
        <div style="margin: 0 0 0 40px">
          <span class="bold">宾馆类型:</span>
          <span>{{ window.hotelCategory }}</span>
        </div>
      </div>
      <div style="margin: 10px 0 10px 20px; display: flex">
        <div style="width: 40%">
          <span class="bold">房间数量:</span>
          <span>{{ window.numberOfRooms }}</span>
        </div>
        <div style="margin: 0 0 0 40px">
          <span class="bold">入住时间:</span>
          <span>{{ window.arriveTime }}</span>
        </div>
      </div>
      <div style="margin: 10px 0 10px 20px; display: flex">
        <div style="width: 40%">
          <span class="bold">离店时间:</span>
          <span>{{ window.checkOutTime }}</span>
        </div>
        <div style="margin: 0 0 0 40px">
          <span class="bold">天数:</span>
          <span>{{ window.checkInTime }}</span>
        </div>
      </div>
      <div style="margin: 10px 0 10px 20px; display: flex">
        <div style="width: 40%">
          <span class="bold">价格:</span>
          <span>{{ window.payAmount }}</span>
        </div>
        <div style="margin: 0 0 0 40px">
          <span class="bold">利润:</span>
          <span>{{ window.profit }}</span>
        </div>
      </div>
      <div style="margin: 10px 0 10px 20px; display: flex">
        <div style="width: 40%">
          <span class="bold">早餐:</span>
          <span>{{ window.breakfast }}</span>
        </div>
        <div style="margin: 0 0 0 40px; width: 40%">
          <span class="bold">总计金额:</span>
          <span>{{ window.totalAmount }}</span>
        </div>
      </div>
      <div style="margin: 10px 0 10px 20px; display: flex">
        <div style="width: 40%">
          <span class="bold">到店时间:</span>
          <span>{{ window.arrivalDate }}</span>
        </div>
        <div style="margin: 0 0 0 40px; width: 40%">
          <span class="bold">支付信息:</span>
          <span>{{ window.paymentInformation }}</span>
        </div>
      </div>
      <div style="margin: 10px 0 10px 20px; display: flex">
        <div style="width: 40%">
          <span class="bold">通知方式:</span>
          <span>{{ window.methodToInforme }}</span>
        </div>
        <div style="margin: 0 0 0 40px; width: 40%">
          <span class="bold">加餐要求:</span>
          <span>{{ window.extraMealRequest }}</span>
        </div>
      </div>
      <div style="margin: 10px 0 10px 20px; display: flex">
        <div style="width: 40%">
          <span class="bold">加床要求:</span>
          <span>{{ window.extraBedRequest }}</span>
        </div>
        <div style="margin: 0 0 0 40px; width: 40%">
          <span class="bold">接机要求:</span>
          <span>{{ window.pickUpRequirements }}</span>
        </div>
      </div>
      <div style="margin: 10px 0 10px 20px; display: flex">
        <div style="width: 40%">
          <span class="bold">附加要求:</span>
          <span>{{ window.additionalRequirements }}</span>
        </div>
        <div style="margin: 0 0 0 40px; width: 40%">
          <span class="bold">特殊要求:</span>
          <span>{{ window.specialRequirements }}</span>
        </div>
      </div>
      <div style="margin: 10px 0 10px 20px; display: flex">
        <div style="width: 40%">
          <span class="bold">公司备注:</span>
          <span>{{ window.companyNotes }}</span>
        </div>
        <div style="margin: 0 0 0 40px; width: 40%">
         <span class="bold">入住人:</span>
          <span>{{ window.guestName }}</span>
        </div>
      </div>
      <div style="margin: 10px 0 10px 20px; display: flex">
        <div style="width: 40%">
          <span class="bold">联系人:</span>
          <span>{{ window.contact }}</span>
        </div>
        <div style="margin: 0 0 0 40px; width: 40%">
          <span class="bold">联系电话:</span>
          <span></span>
        </div>
      </div> -->
      <div>
        <span>操作记录</span>
        <el-table
          :header-cell-style="{
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }"
          :data="recordList"
          size="mini"
          border
          stripe
        >
          <el-table-column label="预定" prop="a"></el-table-column>
          <el-table-column label="操作说明" prop="a"></el-table-column>
          <el-table-column label="操作变化" prop="a"></el-table-column>
          <el-table-column label="操作说明" prop="a"></el-table-column>
          <el-table-column label="操作人" prop="a"></el-table-column>
        </el-table>
      </div>
      <div>
        <span>短信记录</span>
        <el-table
          :header-cell-style="{
            color: '#fff',
            background: '#6090EC',
            fontSize: '11px',
            fontWeight: 'normal',
          }"
          :data="recordList"
          size="mini"
          border
          stripe
        >
          <el-table-column label="短信发送内容" prop="a"></el-table-column>
          <el-table-column label="短信发送时间" prop="a"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="againSend(scope.row)"
                >重发</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailPopup = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="取消订单" :visible.sync="cencelDialog" width="30%" center>
      <el-form :model="ruleForm" ref="ruleForm" :rules="ruleRules" size="mini">
        <div style="display: flex">
          <el-form-item
            label="取消原因:"
            prop="cancelReason"
            style="display: flex"
          >
            <el-select
              clearable
              v-model="ruleForm.cancelReason"
              style="width: 200px"
              size="mini"
            >
              <el-option
                v-for="item in cancelReasonList"
                :key="item.value"
                :label="item.value"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cencelDialog = false">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "orderquery",
  data() {
    return {
      // 退单原因
      cancelReasonList: [
        {
          value: "对酒店相关条件不满意",
        },
        {
          value: "价格过高",
        },
        {
          value: "通过其它途径预订",
        },
        {
          value: "行程变更",
        },
        {
          value: "已换酒店",
        },
        {
          value: "重单",
        },
        {
          value: "其它",
        },
      ],
      ruleRules: {
        cancelReason: [
          { required: true, message: "请选择", trigger: "change" },
        ],
      },
      employeeList: [],
      ruleForm: {
        cancelReason: "",
        id: null,
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入活动名称",
            trigger: "blur",
          },
        ],
      },
      //详情数据
      localInfo: {},
      meituanInfo: {},
      cencelDialog: false,

      //分页
      pageTotal: 0,
      detailPopup: false,
      orderId: null,
      cancelList: "",
      // 支付方式
      payment: [
        {
          value: "0",
          label: "全部",
        },
        {
          value: "1",
          label: "现付",
        },
        {
          value: "2",
          label: "预付",
        },
      ],
      details: [],
      // 入参
      selectData: {
        orderNumber: "",
        hotelName: "",
        orderId: "",
        contactsName: "",
        phone: "",
        userAccount: "",
        createTimeMax: "",
        createTimeMin: "",
        checkInTimeMax: "",
        checkInTimeMin: "",
        leaveTimeMax: "",
        leaveTimeMin: "",
        orderStatus: "",
        payStatus: "",
        pageNo: 1,
        pageSize: 10,
      },
      // 支付状态
      payStatusList: [
        {
          value: "unpaid",
          label: "待支付",
        },
        {
          value: "haspay",
          label: "已支付",
        },
        {
          value: "payFail",
          label: "支付失败",
        },
        {
          value: "cancelpay",
          label: "取消支付",
        },
        {
          value: "refund",
          label: "已退款",
        },
        {
          value: "refundFail",
          label: "退款失败",
        },
      ],
      //  订单状态
      orderStatusList: [
        {
          value: "unpaid",
          label: "待支付",
        },
        {
          value: "haspay",
          label: "已支付",
        },
        {
          value: "payFail",
          label: "支付失败",
        },
        {
          value: "cancelpay",
          label: "取消支付",
        },
        {
          value: "refund",
          label: "已退款",
        },
        {
          value: "refundFail",
          label: "退款失败",
        },
        {
          value: "subscribe",
          label: "预约中",
        },
        {
          value: "defeated",
          label: "预约失败",
        },
        {
          value: "checkIn",
          label: "待入住",
        },
        {
          value: "cancelStay",
          label: "取消中",
        },
        {
          value: "cancelOrder",
          label: "取消成功",
        },
        {
          value: "accomplish",
          label: "完成",
        },
      ],
      // 操作记录
      recordList: [
        {
          a: "",
        },
      ],
    };
  },
  props: {},
  components: {},
  methods: {
    // 修改确定按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .hotelcancelOrder({
              id: this.ruleForm.id,
              cancelReason: this.ruleForm.cancelReason,
            })
            .then((res) => {
              console.log(res);
              if (res.code == "00000") {
                this.$message({
                  message: "取消成功",
                  type: "success",
                });
                this.cencelDialog = !this.cencelDialog;
                this.conditionHotelOrder();
                this.$refs[formName].resetFields();
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 修改按钮
    cencelBtn(row) {
      console.log(row);
      this.ruleForm.id = row.id;
      this.cencelDialog = !this.cencelDialog;
    },
    // 跳转去支付页
    topay(row) {
      console.log(row);
      let objcustmer={
        id:row.userId,
        userAccount:row.userAccount,
      }
      let orderObj={
        orderId:row.id,
        payPrice:row.payPrice,
      }
      this.$router.push({
        name: "paya",
        params: {
          huiyuan:objcustmer,
          data:orderObj,
        },
      });
    },

    //分页
    handleSizeChange(value) {
      this.selectData.pageSize = value;
      this.conditionHotelOrder();
    },
    handleCurrentChange(value) {
      this.selectData.pageNo = value;
      this.conditionHotelOrder();
    },

    search() {
      this.selectData.pageSize = 10;
      this.selectData.pageNo = 1;
      this.conditionHotelOrder();
    },
    // 短信重发点击事件
    againSend() {
      console.log(11);
    },
    // 详情
    listdetails(row) {
      console.log(row);
      this.orderId = row.id;
      console.log(this.orderId);
      this.detailPopup = true;

      // this.getselectHotelOrderDetails();
      this.getLocalhotelOrder(row.id);
      this.gethotelOrderInfo(row.orderId);
    },
    getLocalhotelOrder(id) {
      this.$axios
        .getLocalhotelOrder({
          id: id,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.localInfo = res.data;
            console.log(this.window);
          }
        });
    },
    gethotelOrderInfo(orderId) {
      this.$axios
        .gethotelOrderInfo({
          queryParams: [{ mtOrderId: orderId }],
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.meituanInfo = res.data;
            console.log(this.window);
          }
        });
    },

    // 查询
    conditionHotelOrder() {
      this.$axios
        .gethotelOrderList({
          pageNo: this.selectData.pageNo,
          pageSize: this.selectData.pageSize,

          orderNumber: this.selectData.orderNumber,
          hotelName: this.selectData.hotelName,
          orderId: this.selectData.orderId,
          contactsName: this.selectData.contactsName,
          phone: this.selectData.phone,
          userAccount: this.selectData.userAccount,
          createTimeMax: this.selectData.createTimeMax,
          createTimeMin: this.selectData.createTimeMin,
          checkInTimeMax: this.selectData.checkInTimeMax,
          checkInTimeMin: this.selectData.checkInTimeMin,
          leaveTimeMax: this.selectData.leaveTimeMax,
          leaveTimeMin: this.selectData.leaveTimeMin,
        })
        .then((res) => {
          console.log(res);
          if (res.code == "00000") {
            this.details = res.data.records;
            this.pageTotal = res.data.total;
          }
        });
    },

    cancel(row) {
      console.log(row);
      this.cancelList = row.orderId;
      console.log(this.cancelList);
      this.$router.push({
        name: "hotelCancellation",
        params: {
          cancelList: this.cancelList,
        },
      });
    },
  },
  mounted() {
    // 订单列表
    this.conditionHotelOrder();
  },
};
</script>

<style scoped>
.top {
  margin: 30px 20px 20px 20px;
}

.orderquery {
  margin: 20px;
}

.bold {
  font-weight: bold;
  margin-right: 20px;
}
</style>